<template>
  <div class="main">
    <div class="body_back"><img src="../assets/login_register_ba.jpg" /></div>
    <div class="login_demo">
      <h2>用 户 登 录</h2>

      <el-form class="from_demo" ref="form" :model="user" label-width="80px">
        <el-form-item label="账号：">
          <el-input
            placeholder="请输入账号"
            v-model="user.username"
            class="input_username"
          ></el-input>
        </el-form-item>
        <br />
        <br />
        <el-form-item label="密码：">
          <el-input
            placeholder="请输入密码"
            v-model="user.password"
            show-password
            class="input_password"
          ></el-input>
        </el-form-item>
        <h4 v-text="erro_msg">账号或密码错误！！</h4>
        <el-button
          icon="el-icon-s-custom"
          class="login_btn"
          type="success"
          @click="loginBtn"
          >登录</el-button
        >
        <el-button
          @click="register_cli"
          icon="el-icon-s-check"
          class="register_btn"
          type="primary"
          >去注册</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script>
import "../assets/css/sign.css";
import "../assets/css/iconfont.css";
export default {
  name: "login",
  layout: "sign",
  data() {
    return {
      user: {
        username: "",
        password: "",

      },
      token: "",
      erro_msg:"请登录！"
    };
  },
  components: {},
  methods: {
    register_cli() {
      this.$router.push({ path: "/register" });
    },
    loginBtn() {
       let this_ = this;
      this.$http
        .post(`http://localhost:88/api/book/user/token/login`, this.user)
        .then(function (response) {
          console.log(response)
          if(response.data.code == 200){
            this_.token = response.data.token
            console.log(this_.token)
            // this_.$store.commit('setToken',this_.token)
            this_.$router.push({
                path: '/mycenter'             
              })

          }else{
              this_.erro_msg = response.data.msg;
          }
          
          
        })
        .catch(function (err) {
          console.log(err);
        });

      
    },
  },
};
</script>
<style>
.from_demo {
  margin-top: 70px;
}
h4{
  text-align: center;
  color: rgb(175, 10, 10);
  height: 20px;
}
h2 {
  text-align: center;
  
}
.main {
  padding: 0px;
  margin: 0px;
}

.login_btn {
  margin: 30px 60px 0px 126px;
}

.body_back {
  height: 1000px;
}
.body_back img {
  width: 100%;
  min-width: 200px;
  height: 100%;
}
.login_demo {
  border-radius: 17px;
  background: rgb(46, 47, 48, 0.7);
  width: 500px;
  min-width: 500px;
  height: 500px;
  margin: 0 auto;
  position: absolute;
  top: 200px;
  left: 35%;
  color: black;
}
.input_username {
  width: 350px;
}
.input_password {
  width: 350px;
}
</style>